import { useState } from "react";
import { Layout, Input, Modal, Menu, ConfigProvider } from "antd";
import type { MenuProps } from "antd";
import "./index.scss";
import { Link, Outlet, useNavigate } from "react-router-dom";
// import * as Icons from '@ant-design/icons'
import {
  PoweroffOutlined,
  ProfileOutlined,
  RedditCircleFilled,
} from "@ant-design/icons";

import zhCN from "antd/locale/zh_CN";
import { tuple } from "antd/es/_util/type";

const { Header, Sider, Content } = Layout;

const rootSubmenuKeys = [
  "item-1",
  "item-2",
  "item-3",
  "item-4",
  "item-5",
  "item-6",
  "item-7",
  "item-8",
  "item-9",
];
type MenuItem = Required<MenuProps>["items"][number];

const menuContent = [
  {
    label: <Link to={"/home"}>首页</Link>,
    key: "item-1",
    icon: <ProfileOutlined />,
  }, // 菜单项务必填写 key
  {
    label: "系统管理",
    key: "item-2",
    icon: <ProfileOutlined />,
    children: [
      {
        label: <Link to={"/home/system/roleManagement"}>角色管理</Link>,
        key: "submenu-item-1",
      },
      {
        label: <Link to={"/home/system/userManagement"}>用户管理</Link>,
        key: "submenu-item-2",
      },
      {
        label: <Link to={"/home/system/permissionManagement"}>权限管理</Link>,
        key: "submenu-item-3",
      },
    ],
  },
  {
    label: "学校管理",
    key: "item-3",
    icon: <ProfileOutlined />,
    children: [
      {
        label: <Link to={"/home/school"}>学校管理</Link>,
        key: "submenu-item-4",
      },
    ],
  },
  {
    label: "数据管理",
    key: "item-4",
    icon: <ProfileOutlined />,
    children: [
      {
        label: <Link to={"/home/data/studentManagement"}>学生管理</Link>,
        key: "submenu-item-5",
      },
      {
        label: <Link to={"/home/data/teacherManagement"}>教职工管理</Link>,
        key: "submenu-item-6",
      },
      {
        label: <Link to={"/home/data/classManagement"}>班级管理</Link>,
        key: "submenu-item-7",
      },
    ],
  },
  {
    label: "缴费管理",
    key: "item-5",
    icon: <ProfileOutlined />,
    children: [
      {
        label: <Link to={"/home/payment/ProjectManagement"}>缴费项目管理</Link>,
        key: "submenu-item-8",
      },
      {
        label: (
          <Link to={"/home/payment/ScheduleManagement"}>缴费进度管理</Link>
        ),
        key: "submenu-item-9",
      },
      {
        label: <Link to={"/home/payment/DetailManagement"}>缴费明细管理</Link>,
        key: "submenu-item-10",
      },
    ],
  },
  {
    label: "缴费通知管理",
    key: "item-6",
    icon: <ProfileOutlined />,
    children: [
      {
        label: <Link to={"/home/noticePayment"}>缴费通知管理</Link>,
        key: "submenu-item-11",
      },
    ],
  },
  {
    label: "订单管理",
    key: "item-7",
    icon: <ProfileOutlined />,
    children: [
      {
        label: <Link to={"/home/order"}>订单管理</Link>,
        key: "submenu-item-12",
      },
    ],
  },
  {
    label: "余额管理",
    key: "item-8",
    icon: <ProfileOutlined />,
    children: [
      {
        label: <Link to={"/home/balance"}>余额管理</Link>,
        key: "submenu-item-13",
      },
    ],
  },
  {
    label: "账户管理",
    key: "item-9",
    icon: <ProfileOutlined />,
    children: [
      {
        label: <Link to={"/home/account/schoolAccount"}>学校账户</Link>,
        key: "submenu-item-14",
      },
      {
        label: <Link to={"/home/account/studentAccount"}>学生账户</Link>,
        key: "submenu-item-15",
      },
    ],
  },
];

const Home = () => {
  const navigate = useNavigate();
  const close = () => {
    navigate("/login", { replace: true });
  };

  const [openKeys, setOpenKeys] = useState(["item-1"]);

  // 设置
  const [modal1Open, setModal1Open] = useState(false);

  // 导航菜单只展开当前
  const onOpenChange: MenuProps["onOpenChange"] = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  return (
    <Layout className="home">
      <Header className="header">
        <h1>
          <img src="https://cimg.axureshop.com/b4/1f/55/b41f554bfd2f443c9e10f88dca736ae8/images/首页-框架/u12.png" />
          智慧缴费管理系统
        </h1>
        <div className="header-right">
          <RedditCircleFilled />
          {/* <span>{JSON.parse(sessionStorage.getItem('user'))}</span> */}
          <span className="user" onClick={() => setModal1Open(true)}>
            你好！系统管理员
          </span>
          <PoweroffOutlined onClick={close} className="icon" />
          注销
        </div>
        {/* 设置密码 */}
        <Modal
          style={{ top: 65, right: -563 }}
          width={250}
          closable={false}
          open={modal1Open}
          onOk={() => setModal1Open(false)}
          onCancel={() => setModal1Open(false)}
        >
          <p>设置密码：</p>
          <Input allowClear />
        </Modal>
      </Header>
      <Layout>
        <Sider className="sider" width="256">
          <div className="user-box">
            <div className="user-img">
              <img
                src="https://tse1-mm.cn.bing.net/th/id/OIP-C.klEHLfTuRaqXDsIRsHBGxQHaE8?w=198&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"
                alt="用户头像"
              />
            </div>
            <span>admin</span>
            <span>系统管理员</span>
          </div>
          <Menu
            style={{
              width: "256px",
              background: "linear-gradient(0deg, #345153 0%, #36bbc2 100%)",
              border: "none",
              color: "#eee",
            }}
            defaultSelectedKeys={["item-1"]}
            mode="inline"
            items={menuContent}
            openKeys={openKeys}
            onOpenChange={onOpenChange}
          />
        </Sider>
        <Content className="content">
          <ConfigProvider locale={zhCN}>
            <Outlet />
          </ConfigProvider>
        </Content>
      </Layout>
    </Layout>
  );
};
export default Home;
